<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>ITArmy</title>
    <link rel="icon" type="image/x-icon" href="/static/images/logoIcon.icon">
    <link rel="stylesheet" href="/static/fonts" />
    <link rel="stylesheet" href="/static/css/signIndex.css" />
    <script type="text/javascript" src="/static/js/jquery-3.4.0.js"></script>
    <script type="text/javascript" src="/static/js/index.js"></script>
</head>

<body>
<!--顶部导航部分-->
<div class="nav">
    <!--导航居中样式-->
    <div class="navCenter">
        <!--左侧导航-->
        <div class="navLeft">
            <!--logo-->
            <div class="logo">
                <img src="img/logo.png" />
            </div>
            <!--主页-->
            <div class="mainPage"><a href="">首页</a></div>
            <!--关注-->
            <div class="attention "><a href="">关注</a></div>
            <!--消息-->
            <div class="information"><a href="">消息</a></div>
            <!--搜索部分-->
            <div class="search">
                <form action="/serialize/selectBS" method="get">
                    <input type="text" name="inputName" class="navInput"/>
                    <button class="navBtn" type="submit"><i class="fa fa-search"></i></button>
                </form>
            </div>
        </div>
        </div>
        <!--右侧导航-->
        <div class="navRight">
            <!--个人信息图片部分-->
            <div class="myselfPic"><img src="img/image-293.jpg">
                <i class	="fa fa-sort-down" id="myselfDown"></i>
                <i class	="fa fa-sort-up"  id="myselfUp"></i>
            </div>

            <a href=""><div class="write">写文章</div></a>
        </div>
    </div>
</div>
<!--主体部分-->
<div class="mainBody">
    <!--<!--个人信息图片下拉菜单-->
    <ul class="myselfDownList">
        <li>我的博客</li>
        <li></li>
        <li></li>
        <li></li>
        <li>设置</li>
        <li>退出</li>
    </ul>
</div>

    <!--主页主体左侧技术频道部分-->
    <div class="mainPageBodyLeft">
        <ul class="mainPageBodyLeftUl"><h3>技术频道</h3>
            <li>前端</li>
            <li>后端</li>
            <li>数据库</li>
            <li>Java</li>
            <li>Python</li>
            <li>区块链</li>
            <li>小程序</li>
            <li>人工智能</li>
            <li>安全</li>
            <li>行业快讯</li>
        </ul>
    </div>

    <!--主页主体中间文章部分-->
    <div class="mainPageBodyMiddle">
        <!--主体轮播-->
        <div class="banner">
            <img src="/static/images/banner1.png" />
        </div>
        <!--主体部分文章切换部分-->
        <ul class="articleTab">
            <li class="articleTab1">推荐文章
            </li>
            <li class="articleTab2">热门文章
            </li>
            <li class="articleTab3">最新文章
            </li>
        </ul>
        <!--主体部分文章样例-->

        <div class="article">
            <!--带图的文章-->
            <div class="articlePic">
                <h2 class="articleTitle">文章标题<span class="close">×</span>
                    <div class = "bg-model">
                        　　<div class = 'content'>
                        <div>edfg</div>
                        　　</div>
                </h2>
                <p>文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容</p>
                <div class="articleImg">
                    <img src="/static/images/articlePic.jpg" />
                    -         </div>
                <!--文章底部附加功能-->
                <!--作者-->
                <div class="author"><a href="">作者XXXX</a></div>
                <!--点赞-->
                <span class="heart">
		  		 <i class="fa fa-heart-o" id="heartO"></i>
		  		  <i class="fa fa-heart"  id="heart"></i>
		  		 </span>
                <!--评论-->
                <i class="fa fa-commenting" id="commenting"></i>
            </div>
            <!--不带图的文章-->
            <div class="articleNoPic">
                <h2 class="articleTitle">文章标题</h2>
                <p>文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容文章内容</p>
            </div>
        </div>
    </div>
    <!--主页主体右侧其他分类消息部分-->
    <div class="mainPageBodyRight">
        <ul class="mainPageBodyRightUl">
            <li>会员充值</li>
            <li>问答</li>
            <li>小册</li>
            <li></li>
        </ul>

    </div>

</body>
</html>
